<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>前端页面预览</title>
		<link rel="stylesheet" type="text/css" href="css/style-v2.css"/>
	</head>
	<!--[if lt IE 10]>
	<script type="text/javascript">
		alert('请使用高版本IE或其他浏览器！如果是360就切换到极速模式')
	</script>
	<![endif]-->

	<body>
		<div class="video-wrap">
			<video autoplay="autoplay" loop="true" preload="auto" class="video-bg">
				<source src="img/ti9.mp4" type="video/mp4">
				<!-- <source src="img/dota2.webm" type="video/webm"> -->
			</video>
			<div class="video-top-bg"></div>
		</div>
		<section class="menu-wrap">
			<h1>前端页面预览</h1>
			<div class="explain">所谓无底深渊，下去，也是前程万里。</div>
			<div class="switch">
				<input type="checkbox" name="toggle">
				<label for="toggle"><i></i></label>
				<span></span>
			</div>
			<div id="siteLisT"></div>

			<!-- <div class="project">
				<h2>碳汇</h2>
				<div class="version">
					<ul>
						<li class="green"><a href="http://qd/carbon/carbon-miniApp/unpackage/dist/build/h5/index.html" target="_blank">本地前台</a></li>
						<li class="red"><a href="http://qd/carbon/frontend/login.html" target="_blank">本地后台</a></li>						
					</ul>
				</div>
			</div> -->

		</section>
		<!--搜索开始-->
		<section class="right-wrap">
			<section class="search">
				<div class="field">
					<!-- <div class="icon"></div> -->
					<input type="text" name="nope" id="nope" placeholder="请输入汉字" maxlength="40" />
				</div>
			</section>
			<iframe src="" width="100%" height="">
				
			</iframe>
		</section>

		<!-- <span style="width:100px;height:100px;position:fixed;bottom:20px;right: 20px;background:#08a;" id="add">+</span> -->

		<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="js/jquery-qrcode-0.17.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<script>
			// $('#add').click(function(){
			// 	axios.post('http://127.0.0.1:8072/link/createlink', {
			// 		url: '1',
			// 		title:'String',
			// 		desc:'String',
			// 		type:'String',
			// 		icon:'String',
			// 		clicks:1,
			// })
			// .then(function (response) {
			// 	console.log(response);
			// })
			// .catch(function (error) {
			// 	console.log(error);
			// });

			// })
			
		</script>
		<script type="text/javascript">
			
			// $('.project h2').click(function() {
			$('.menu-wrap').on("click",".project h2",function() {
				var dom = $(this);
				var index = dom.attr('data-index');
				localStorage.setItem("current", index);
				console.log('index',index);
				if(dom.nextAll('.version').length == 1) {
					dom.parent().toggleClass('open');
					dom.next('.version').addClass('open');
					dom.next('.version').find('h2').addClass('f-dn');
				} else {
					dom.parent().toggleClass('open');
				}

			});
			$('.switch input').click(function() {
				if($(this).is(':checked')) {
					$('.project,.version').addClass('open');
				} else {
					$('.project,.version').removeClass('open');
				}
			});
			$('.search .icon').click(function() {
				$('.field input').val('');
			});

			
		</script>

		<script src="js/autocompleter.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var menuWrap = $('.menu-wrap');
			var _iframe = ('.right-wrap iframe');
			jQuery.fn.setHight = function() {
				this.css("height", $(window).height() + "px");
				return this;
			}

			menuWrap.setHight();
			$('.video-wrap').setHight();
			//_iframe.setHight();

			$(window).resize(function() {

				menuWrap.setHight();
				//_iframe.setHight();
				$('.video-wrap').setHight();

			});
			
		</script>
		<script type="text/javascript">
			$(function(){
				axios.get('http://127.0.0.1:8072/link/getList')
				.then(function (res) {
					console.log(res);
					//列表分组
					function groupArr(arr) {
						var map = {},
							result = [];
						for (var i = 0; i < arr.length; i++) {
							var ai = arr[i];
							if (!map[ai.type]) {
							result.push({
								ftitle: ai.type,
								list: [ai]
							});
							map[ai.type] = ai;
							} else {
							for (var j = 0; j < result.length; j++) {
								var dj = result[j];
								if (dj.ftitle == ai.type) {
								dj.list.push(ai);
								break;
								}
							}
							}
						}
						return result;
					}
					let siteList = groupArr(res.data.data);
					let html = "";
					siteList.forEach(function(item,index){
						// console.log('item',item);
						let itemHtml  = "";
						listHtml = "";						
						// console.log('itemHtml',itemHtml);
						item.list.forEach(function(site){
							listHtml+=`<li><a href="${site.url}" target="_blank">${site.title}</a></li>`
						})
						// console.log('listHtml',listHtml);
						itemHtml = `<div class="project"><h2 >${item.ftitle}</h2><div class="version"><ul>${listHtml}<ul></div></div>`;
						$(itemHtml).appendTo("#siteLisT");
					});
					//打开上次的列表
					var h2 = $('.project h2');
					for(var i = 0; i < h2.length; i++) {
						h2.eq(i).attr('data-index', i)
					};
					var currentIndex = localStorage.getItem("current");
					if(currentIndex) {
						var _this = $('.project h2').eq(currentIndex);
						_this.parent().addClass("open");
						if(_this.parent().hasClass('open')) {
							_this.parent().parent().addClass("open");
						};
						if(_this.nextAll('.version').length == 1) {
							_this.next('.version').addClass("open");
							_this.next('.version').find('h2').addClass('f-dn');
						}

					} else {
						$('.project h2').removeClass('open');
					};
					//打开上次的列表
					var data = [];
						$('.version a').each(function() {
							var dom = $(this);
							var t = dom.text();
							var u = dom.attr('href');
							var v = dom.parent().parent().siblings('h2').text();
							var _temp = {
								"label": t,
								"url": u,
								"v": v
							};
							data.push(_temp)
					});
					$('#nope').autocompleter({
						// marker for autocomplete matches
						highlightMatches: true,
						// object to local or url to remote search
						source: data,
						// custom template
						template: '<a href="{{ url }}" target="_blank">{{ label }}</a> {{ v }}',
						// show hint
						hint: true,
						// abort source if empty field
						empty: false,
						// max results
						//limit: 30,
						callback: function(value, index, selected) {
							if(selected) {
								window.open(selected.url, '_blank');
								$('.field input').val('');
								//$('.icon').css('background-color', '#f60');
							}
						}
					});
				})
				.catch(function (error) {
					console.log(error);
				});
				$(document).on('mouseover mouseout','.version li',function(event){
					// https://larsjung.de/jquery-qrcode/
					if(event.type == "mouseover"){
					//鼠标悬浮
					var dom = $(this).find('a');
					console.log('dom',dom);
					if(dom.has('canvas').length){
						dom.find('canvas').removeClass('f-dn');
						return true;
					}else{
						var links = dom.attr('href');
						var host = window.location.host;
						var labeltxt = dom.text();
						dom.qrcode({
							text: window.location.protocol+'//'+host+links,
							size: 400,
							mode: 2,
							label: labeltxt,
							minVersion: 7,
							mPosY: 0.5,
							radius: 0.5,
							quiet: 4,
							ecLevel: 'H',
						});
					}	
					}else if(event.type == "mouseout"){
					//鼠标离开
					$('.version a canvas').addClass('f-dn');
					}
				});
			});
		</script>
	</body>

</html>